<template>
  <div>
    <!-- 搜索卡片区 -->
    <el-card class="box-card">
      <!-- 命名插槽，头部内容 -->
      <div slot="header" class="clearfix">
          <span>全部图文</span>
      </div>
      <!-- 匿名插槽，内容主体 -->
      <div class="text item">
        <!-- el-form搜索表单区域 -->
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px">
            <el-form-item label="文章状态">
                  <!-- <el-radio v-model="searchForm.status" label="">全部</el-radio>
                  <el-radio v-model="searchForm.status" label="0">草稿</el-radio>
                  <el-radio v-model="searchForm.status" label="1">待审核</el-radio>
                  <el-radio v-model="searchForm.status" label="2">审核通过</el-radio>
                  <el-radio v-model="searchForm.status" label="3">审核失败</el-radio> -->

                    <el-radio-group v-model="searchForm.status" @change="getArticles">
                      <el-radio  label="">全部</el-radio>
                      <el-radio  label="0">草稿</el-radio>
                      <el-radio  label="1">待审核</el-radio>
                      <el-radio  label="2">审核通过</el-radio>
                      <el-radio  label="3">审核失败</el-radio>
                    </el-radio-group>
            </el-form-item>
            <el-form-item label="频道列表">
              <!-- <el-select v-model="searchForm.channel_id" placeholder="请选择" clearable @change="getArticles">
                   <el-option
                      v-for="item in channelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                   </el-option>
              </el-select> -->
              <channel-com @slt='selectHandler' @change="getArticles"></channel-com>
            </el-form-item>
            <!-- timetotime得到的是一个数组，里面包含开始时间和结束时间，要把开始和结束时间分给begin_pubdate和end_pubdate -->
            <!-- value-format是把时间的对象格式改为字符串格式 -->
            <el-form-item label="时间选择">
                 <el-date-picker
                  v-model="timetotime"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  >
                </el-date-picker>
            </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 文章列表区 -->
    <el-card class="box-card">
      <!-- 命名插槽，头部内容 -->
      <div slot="header" class="clearfix">
          <span>共找到{{tot}}条符合条件的内容</span>
      </div>
      <!-- 匿名插槽，内容主体 -->
      <div class="text item">
        <!-- el-form搜索表单区域 -->
           <el-table :data="articleList" style="width: 100%">
             <!-- label指显示的标题 -->
             <!-- prop指对应列内容的字段名 -->
             <el-table-column  label='图标'>
               <!-- 通过作用域插槽 -->
               <!-- stData.row可以获得数据，有data,status,headers,cover>images等 -->
               <img  :src="stData.row.cover.images[0]" slot-scope="stData" alt="没有图标" width="150" height="100">
             </el-table-column>
              <el-table-column prop="title" label="标题" width="180"></el-table-column>
              <!-- 使用作用域插槽 -->
              <!-- 如果多个标签都使用了作用域插槽，可以设置一个雷锋标签template -->
              <el-table-column prop="status" label="状态" width="180">
                <template slot-scope="stData">
                  <el-tag v-if="stData.row.status===0">草稿</el-tag>
                  <el-tag v-else-if="stData.row.status===1" type='success'>待审核</el-tag>
                  <el-tag v-else-if="stData.row.status===2" type='info'>审核通过</el-tag>
                  <el-tag v-else type='warning'>审核失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="pubdate" label="发布时间"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="stData">
                  <el-button type="primary" size="mini" @click="$router.push(`/articleedit/${stData.row.id}`)">修改</el-button>
                  <el-button type="danger" size="mini" @click="del(stData.row.id)">删除</el-button>
                </template>
              </el-table-column>
           </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchForm.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="searchForm.per_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tot">
              </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入频道独立组件
import ChannelCom from '@/components/channel.vue'

export default {
  name: 'ArticleList',
  created () {
    // 获取频道列表
    // this.getChannels()
    // 获取文章数据
    this.getArticles()
  },
  // 注册频道独立组件
  components: {
    ChannelCom
  },
  data () {
    return {
      searchForm: {
        status: '',
        channel_id: '',
        begin_pubdate: '', // 文章发布开始时间
        end_pubdate: '', // 文章发布结束时间
        page: 1,
        per_page: 10
      },
      tot: 0,
      timetotime: [],
      articleList: []
      // channelList: []
    }
  },
  // watch监听器，检测data中数据的变化，有两个参数，newv和oldv，新值与旧值
  watch: {
    // 发布开始时间与结束时间
    timetotime (newvalue) {
      // 如果存在新值就以为着数据变化，把新数据分别赋给begin_pubdate和end_pubdate
      // 如果没有新数据，就是把老数据给清空了，所以要把begin_pubdate和end_pubdate也清空
      if (newvalue) {
        this.searchForm.begin_pubdate = newvalue[0]
        this.searchForm.end_pubdate = newvalue[1]
      } else {
        this.searchForm.begin_pubdate = ''
        this.searchForm.end_pubdate = ''
      }
      this.getArticles()
    },
    // 使用监听器
    // 文章状态变化实现筛选功能
    // 'searchForm.status' (newv) {
    //   this.getArticles()
    // }
    // 深度监听
    // searchForm: {
    //   handler: function (newv, oldv) {
    //     this.getArticles()
    //   },
    //   deep: true
    // }
    'searchForm.channel_id' (newv) {
      this.getArticles()
    }
  },
  methods: {
    // 声明子传父selectHandler事件方法
    selectHandler (val) {
      this.searchForm.channel_id = val
    },
    // 删除
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 通过axios发送请求
        let pro = this.$http.delete(`/articles/${id}`)
        pro
          .then(result => {
            this.getArticles()
          })
          .catch(err => {
            return this.$message.error('删除文章失败' + err)
          })
      }).catch(() => {

      })
    },
    // 分页效果
    // 每页条数改变时
    handleSizeChange (val) {
      this.searchForm.per_page = val
      this.getArticles()
    },
    // 当前页发生变化时
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getArticles()
    },
    // // 获取频道列表
    // getChannels () {
    //   // 通过axios发送请求得到真实频道数据
    //   let pro = this.$http.get('/channels')
    //   pro
    //     .then(result => {
    //       // console.log(result) // config data headers status
    //       // 把获取的频道数据赋给频道列表
    //       this.channelList = result.data.data.channels
    //     })
    //     .catch(err => {
    //       return this.$message.error('获取频道信息错误' + err)
    //     })
    // },
    getArticles () {
      // 筛选掉空的筛选条件
      // 是对筛选的优化，如果在筛选时有一些条件没有筛选，(如选中状态而不选中时间)则不传参
      let searchData = {}
      for (var i in this.searchForm) {
        if (this.searchForm[i]) {
          searchData[i] = this.searchForm[i]
        }
      }
      // 通过axios发送请求获得文章列表数据
      let pro = this.$http.get('/articles', { params: searchData })
      pro
        .then(result => {
          // console.log(result)
          if (result.data.message === 'OK') {
            // 将数据赋给文章列表
            this.articleList = result.data.data.results
            // 将总数量显示
            this.tot = result.data.data.total_count
          }
        })
        .catch(err => {
          return this.$message.error('获取文章信息错误' + err)
        })
    }
  }
}
</script>
<style lang='less' scoped>
    .box-card{
      margin-bottom: 15px;
    }
    .el-pagination{
      margin:40px 0;
    }
</style>
